<template>
  <div class="air">
    <panel title="设备工作运行环境">
    </panel>
    <div class="air-chart-wrap" v-show="show">
      <radar :width="chartWidth" :height="chartHeight" :options="chartOptions" class="mt10"></radar>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import DEVICE_TYPES from 'config/device-types'
import store from 'src/store' // vuex store instance

export default {
  name: 'envirenments',
  data () {
    return {
      chartWidth: '400px',
      chartHeight: '230px',
      show: false
    }
  },

  computed: {
    envirenmentData () {
      let waterTempHumidity = this.$store.getters.waterTempHumidity
      let flooding = this.$store.getters.flooding
      let level = this.$store.getters.level

      let all = [].concat(waterTempHumidity, flooding, level)

      let rooms = _.groupBy(all, 'room')

      var res = {}
      for (let i in rooms) {
        let temperature
        let humidity
        let waterLevel
        let flooding

        // 温湿度
        let waterTempHumidityItem = _.find(rooms[i], (item) => {
          return item.type === DEVICE_TYPES.TEMP_HUMIDITY
        })
        if (waterTempHumidityItem) {
          temperature = waterTempHumidityItem.data[13]
          humidity = waterTempHumidityItem.data[14]
        }

        // 液位
        let levelItem = _.find(rooms[i], (item) => {
          return item.type === DEVICE_TYPES.LEVEL
        })

        if (levelItem) {
          waterLevel = levelItem.data[26]
        }

        // 水浸
        let floodingItem = _.find(rooms[i], (item) => {
          return item.type === DEVICE_TYPES.FLOODING
        })
        if (floodingItem) {
          flooding = floodingItem.data[25]
        }

        res[i] = [[temperature || 0, humidity || 0, waterLevel || 0, flooding || 0]]
      }
      return res
    },
    series () {
      // 做一些临时更改,以后不一定以water作为首页来使用
      let init = {}
      switch (this.$route.path.split('/')[1]) {
        case ':0':
          init = {
            data1314: '13-14栋消防水泵房',
            data2: '2栋生活水泵房（高区）',
            data3: '3栋生活水泵房（低区）',
            data9: '9栋生活水泵房',
            data22: '9栋生活水泵房'
          }
          return [
            {
              name: '13-14栋消防水泵房',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data1314] ? this.envirenmentData[init.data1314][0] : []}],
              itemStyle: {
                normal: {
                  color: '#F9713C'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            }, {
              name: '2栋生活水泵房（高区）',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data2] ? this.envirenmentData[init.data2][0] : []}],
              itemStyle: {
                normal: {
                  color: '#F57C00'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            },
            {
              name: '3栋生活水泵房（低区）',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data3] ? this.envirenmentData[init.data3][0] : []}],
              itemStyle: {
                normal: {
                  color: '#FF9800'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            },
            {
              name: '9栋生活水泵房',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data9] ? this.envirenmentData[init.data9][0] : []}],
              itemStyle: {
                normal: {
                  color: '#FFB74D'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            },
            {
              name: '22栋生活水泵房',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data22] ? this.envirenmentData[init.data22][0] : []}],
              itemStyle: {
                normal: {
                  color: '#FFE0B2'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            }
          ]
        case ':1':
          init = {
            data1: '生活水泵',
            data2: '消防水泵'
          }
          return [
            {
              name: '生活水泵',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data1] ? this.envirenmentData[init.data1][0] : []}],
              itemStyle: {
                normal: {
                  color: '#F9713C'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            }, {
              name: '消防水泵',
              type: 'radar',
              symbol: 'none',
              data: [{value: this.envirenmentData[init.data2] ? this.envirenmentData[init.data2][0] : []}],
              itemStyle: {
                normal: {
                  color: '#F57C00'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.4
                }
              }
            }
          ]
        case ':2':
          break
        case ':3':
          break
      }
    },
    chartOptions () {
      let legendList = []
      let right
      switch (this.$route.path.split('/')[1]) {
        case ':0':
          legendList = [
            '13-14栋消防水泵房',
            '2栋生活水泵房（高区）',
            '3栋生活水泵房（低区）',
            '9栋生活水泵房',
            '22栋生活水泵房'
          ]
          right = 0
          break
        case ':1':
          legendList = [
            '生活水泵',
            '消防水泵'
          ]
          right = '22%'
          break
        case ':2':
          legendList = [
          ]
          break
        case ':3':
          legendList = [
          ]
          break
      }
      return {
        tooltip: {
          trigger: 'item',
          backgroundColor: '#1e1e1e',
          confine: true
        },
        legend: {
          right: right,
          top: '12%',
          data: legendList,
          itemGap: this.$el && this.$el.clientHeight > 222 ? 20 : 6,
          textStyle: {
            color: '#999',
            fontSize: 14
          },
          orient: 'vertical',
          selectedMode: 'multiple'
          // padding: 0,
        },

        radar: {
          center: ['30%', '50%'],
          radius: '70%',
          nameGap: 10,
          indicator: [
            {text: '温度', max: 100},
            {text: '湿度', max: 100},
            {text: '液位', max: 500},
            {text: '水浸', max: 2}
          ]
        },
        series: this.series
      }
    },
    path () {
      return store.state.route.path.split('/')[1]
    }
  },

  mounted () {
    setTimeout(() => {
      this.initialize()
    }, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 40}px`
      this.show = true
    }
  },

  watch: {
    path: function () {}
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../assets/stylus/common'
.air {
  background: #1E1E1E !important;
  height: 100%;
  position: relative;

  .air-chart-wrap {
    position absolute !important;
    height 100%;
    top: 6% !important;
    padding-left: 6%;
  }
}

.air-quality {
  .air-quality__label {
    font-size: 36px;
    margin: 10px 0;
    text-align: center;

    // 优
    &.excellent {
      color: green;
    }

    // 良
    &.fine {
      color: yellow;
    }

    // 差
    &.bad {
      color: red;
    }

    // 极差
    &.terrible {
      color: purple;
    }
  }

  .air-quality__item {
    line-height: 24px;
    font-size: 12px;
    color: #99A1A8;
  }
}
</style>
